<template>
  <div>
    <el-header class="header">
      <div class="logo">
        <img src="../imgs/home_logoV1-2.png" height="60" width="474"/>
      </div>
      <el-menu :default-active="activeView" class="top-nav-menu" mode="horizontal" @select="handleSelect">
        <el-menu-item index="2" @click="shouye('home')">首页</el-menu-item>
        <el-menu-item index="xianhua" @click="xianhua">鲜花大厅</el-menu-item>

        <el-menu-item index="4" @click="goToOrders">订单查询</el-menu-item>

        <!-- 购物车图标 -->
        <el-menu-item index="6" class="cart-menu-item" @click="showCart">
          <el-badge :value="cartCount" class="item" :max="99">
            <el-tooltip class="item" effect="dark" content="购物车" placement="bottom">
              <i class="el-icon-shopping-cart-2"></i>
            </el-tooltip>
          </el-badge>
        </el-menu-item>

        <el-menu-item index="3" class="login-menu-item">
          <el-dropdown v-if="username" @command="handleCommand">
            <span class="el-dropdown-link">
              你好, <span style="color: red">{{ username }}</span>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="personal">个人中心</el-dropdown-item>
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <template v-else>
            <el-button @click="goToLogin">请先登录</el-button>
          </template>
        </el-menu-item>
        <el-menu-item>
          <el-avatar :size="60" :src="src" shape="square">
            <img src="../imgs/error.png" alt="头像"/>
          </el-avatar>
        </el-menu-item>
      </el-menu>
    </el-header>

    <!-- 购物车对话框 -->
    <el-dialog title="购物车" :visible.sync="dialogVisibl">
      <ul>
        <li v-for="item in cartItems" :key="item.id">
          {{ item.fname }} - ￥{{ item.price }} x {{ item.quantity }}
          <!-- 提供一个按钮或输入框让用户可以修改数量 -->
          <el-button type="text" icon="el-icon-edit" @click="editQuantity(item)">编辑数量</el-button>
        </li>
      </ul>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisibl = false">关闭</el-button>
    </span>
    </el-dialog>


    <div v-if="showRecommendations">
      <h2>爱情鲜花</h2>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="6" v-for="product in flowerList" :key="product.fid">
            <el-card :body-style="{ padding: '0px' }">
              <img :src="product.fsrc" class="image" @error="handleImageError" width="300px" height="300px">
              <div style="padding: 14px;">
                <span class="price-box">
                    <i class="fas fa-shopping-basket"></i>
                </span>
                <el-button type="text" class="button" @click="viewDetails(product)">查看详情</el-button>
                <span><i class="fas"><span style="color: rgba(215,64,205,0.5)">{{
                    product.fname
                  }}</span> (¥</i> {{ product.price }})</span>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>

      <!-- 产品详情对话框 -->
      <el-dialog
          title="产品详情"
          :visible.sync="dialogVisibles"
          width="50%"
          @close="resetProduct">
        <div class="detail-container">
          <img :src="flower.fsrc" class="detail-image" width="300px" height="300px" style="padding-left: 70px ">
          <div class="detail-text">
            <h3>名字: {{ flower.fname }}</h3>
            <p>价格: ¥{{ flower.price }}</p>
            <p>数量: {{ flower.number }}</p>
            <p>描述: {{ flower.flangure }}</p>
            <p v-if="flower.shops">商家: {{ flower.shops.sname }}</p>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
      <el-button @click="dia">关闭</el-button>
      <el-button type="primary" @click="addToCart">加入购物车</el-button>
    </span>
      </el-dialog>

    </div>


    <!-- 条件渲染个人中心页面 -->
    <div v-if="showPersonalCenter" class="personal-center">
      <!--  表格：装主体数据   -->
      <el-table
          ref="multipleTable"
          :data="users"
          tooltip-effect="dark"
          style="width: 70%; height: 400px; position: relative; left: 25%; top: 15px"
      >
        <el-table-column prop="id" label="用户编号" width="120"></el-table-column>
        <el-table-column prop="username" label="用户名称" width="120"></el-table-column>
        <el-table-column prop="password" label="用户密码" width="120"></el-table-column>
        <el-table-column prop="iphone" label="用户电话" width="120"></el-table-column>
        <el-table-column label="用户头像" width="120">
          <template slot-scope="scope">
            <el-avatar :size="60" :src="scope.row.src" @error="errorHandler" shape="square">
              <img src="../imgs/error.png" alt="默认头像"/>
            </el-avatar>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                @click="openUpdateUser(scope.row)"
                style="position: relative;top: 20px"></el-button>
            <el-tooltip class="item" effect="dark" content="谨慎使用" placement="top"
                        style="position: relative; left: 40px; top: -20px">
              <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  @click="deleteUser(scope.row.id)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 模态框 -->
    <div>
      <el-dialog
          title="修改用户信息"
          :visible.sync="dialogVisible"
          width="30%"
          @close="resetForm"
      >
        <el-form :model="userForm">
          <el-form-item label="用户名称" :label-width="formLabelWidth">
            <el-input v-model="userForm.username" autocomplete="off" readonly></el-input>
          </el-form-item>
          <el-form-item label="用户密码" :label-width="formLabelWidth">
            <el-input type="text" v-model="userForm.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用户电话" :label-width="formLabelWidth">
            <el-input v-model="userForm.iphone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用户头像" :label-width="formLabelWidth">
            <el-upload
                class="avatar-uploader"
                action="http://localhost:9091/file/upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
              <img v-if="userForm.src" :src="userForm.src" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
      <el-button @click="guanbi">取 消</el-button>
      <el-button type="primary" @click="updateUser">确 定</el-button>
    </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  Header as ElHeader,
  Menu,
  MenuItem,
  Badge,
  Tooltip,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Input,
  Button,
  Select,
  Option,
  InputNumber,
  Aside,
  Main,
  Carousel,
  CarouselItem
} from 'element-ui';

import axios from 'axios';
import request from "@/utils/request";
import {removeToken} from "@/utils/auth"; // 引入 axios
export default {
  name: 'UserMain',
  components: {
    [ElHeader.name]: ElHeader,
    [Menu.name]: Menu,
    [MenuItem.name]: MenuItem,
    [Badge.name]: Badge,
    [Tooltip.name]: Tooltip,
    [Dropdown.name]: Dropdown,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Input.name]: Input,
    [Button.name]: Button,
    [Select.name]: Select,
    [Option.name]: Option,
    [InputNumber.name]: InputNumber,
    [Aside.name]: Aside,
    [Main.name]: Main,
    [Carousel.name]: Carousel,
    [CarouselItem.name]: CarouselItem,
  },
  data() {
    return {
      activeView: 'home', // 初始值根据你的应用逻辑来设置
      userForm: {
        id: 0,
        username: '',
        password: '',
        iphone: '',
        src: '',
      },
      activeIndex: '1', // 默认激活的菜单项
      cartCount: 0, // 购物车数量
      username: '', // 存储用户名
      src: '', // 存储头像地址
      user: { // 存储用户信息
        id: 0,
        username: '',
        src: ''
      },
      cartItems: [], // 购物车中的商品
      dialogVisibl: false, // 控制对话框显示
      showPersonalInfo: false, // 控制个人信息的显示
      title: '个人中心', // 模态框标题
      users: [], // 存储用户数据的数组
      dialogVisible: false, // 控制模态框显示
      formLabelWidth: '120px', // 表单项的标签宽度
      originalPassword: '', // 保存用于比较的原始密码
      showRecommendations: true, // 控制推荐内容的显示
      showPersonalCenter: false, // 初始值根据你的应用逻辑来设置
      dialogVisibles: false,// 控制模态框显示
      typesss: [], // 存储鲜花类型的数组
      types: {
        tid: 0,
        tname: '',
      },
      flowerList: [],
      flower: {
        fid: 0,
        fname: '',
        types: {
          tid: 0,
          tname: '',
        },
        faddress: '',
        flangure: '',
        fsrc: '',
        shops: {
          sid: 0,
          sname: '',
          spassword: '',
          siphone: '',
          src: '',
        },
        typesss: [],
        price: '',
        number: '',
      },
      // 备用图片数组
      errorImages: [
        'http://image.wncinema.com/img/2024-09-13/5EEAE2967DF94759A1BD43CD14694BED_hua5.webp',
        'http://image.wncinema.com/img/2024-09-13/3335D50566524C1F8B5E7CA84DD111B2_hua2.webp',
        'http://image.wncinema.com/img/2024-09-13/B4A8ADE595AC470993CA66AB2131F332_111.jpg',
        'http://image.wncinema.com/img/2024-09-13/B122BAE2BBE44174A3F3A09060C706E9_hua3.webp',
        'http://image.wncinema.com/img/2024-09-13/60F8CA35A84640EBB4B74FD2DD5D4CA3_hua1.webp',
        'http://image.wncinema.com/img/2024-09-13/708B2DB739C84A62971E969215669305_hua6.webp',
        'http://image.wncinema.com/img/2024-09-13/D9E2D59287D544B0A22A87C8C997B750_hua4..webp',
        'http://image.wncinema.com/img/2024-09-13/6B6FD0DE816E4E57AFFA59ABFCF3AC2B_9.jpg',
        'http://image.wncinema.com/img/2024-09-13/A25D41C340A449529BE443C00DF917A8_11.jpg',
        'http://image.wncinema.com/img/2024-09-13/95E2A4DB4DDA40A3A2BA66D885083F81_3.jpg',
      ], // 随机生成备用图片的函数
      //  添加到购物车
      creats: [],
      creat: {
        id: 0,
        user: {
          uid: 0,
          username: '',
          password: '',
          iphone: '',
          src: '',
        },
        flower: {
          fid: 0,
          fname: '',
          types: {
            tid: 0,
            tname: '',
          },
          faddress: '',
          flangure: '',
          fsrc: '',
          shops: {
            sid: 0,
            sname: '',
            spassword: '',
            siphone: '',
            src: '',
          },
          num: 1, // 数量
        }
      },
      uid: 0,
      fid: 0,
    };
  },
  methods: {
    dia() {
      this.dialogVisibles = false
      //   刷新页面
      // this.$router.go(0);
    },

    // 查看详情
    viewDetails(product) {
      // 假设 product 对象中包含了商品的所有信息，包括商品 ID
      this.flower = Object.assign({}, product);
      // 假设您有一个用户 ID 存储在组件的数据中，例如在 userForm 对象中
      const userId = this.userForm.id; // 获取用户 ID
      console.log("用户 ID:", userId);
      console.log("商品 ID:", this.flower.fid);
      // 您可以在这里添加更多的逻辑，例如将这些信息发送到后端或进行其他处理
      this.dialogVisibles = true;
    },

// 添加到购物车
    addToCart() {
      // // 检查用户是否登录
      if (this.username === null || this.username === '') {
        this.$message.error('请先登录');
        // this.$router.push('/userLogin');
        return;
      } else {
        this.$axios({
          method: 'post',
          url: 'http://localhost:9091/creat/selectCreatOne',
          params: {
            uid: this.userForm.id,
            fid: this.flower.fid
          },
          headers: {
            'Content-Type': 'application/json'
          }
        }).then(response => {
          console.log(response.data);
          if (response.data.msg === '可以加入购物车') {
            this.sendToServer();
            this.cartCount = this.cartCount + 1
          } else {
            this.$message.error(response.data.msg);
          }
        }).catch(error => {
          console.error('Error:', error);
          this.$message.error('请求失败');
        });
      }
    },

    sendToServer() {
      // 构建要发送的数据对象
      const creat = {
        user: this.userForm,
        flower: this.flower,
        num: 1 // 默认数量为 1
      };
      console.log("Sending to server:", JSON.stringify(creat)); // 打印 JSON 字符串
      // 使用 axios 发送 POST 请求
      axios.post('http://localhost:9091/creat/addCreat', creat, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(response => {
        if (response.data.code === 200) {
          this.$message.success('已添加到购物车');
        } else {
          this.$message.error('添加失败');
        }
      }).catch(error => {
        console.error('添加购物车失败', error);
        this.$message.error('添加失败');
      });
    },

    // =====
    showCart() {
      if (this.username != '' && this.username != null) {
        // 如果用户名不为空，跳转到 goShops.vue 页面
        this.$router.push('/goShop');
        window.location.reload(true)
      } else {
        // 如果用户名为空，提示用户先登录
        this.$message({
          type: 'warning',
          message: '请先登录'
        });
      }
    },
    editQuantity(item) {
      console.log('编辑数量', item);
    },

    resetProduct() {
      this.flower = {};
      this.initData()
    },

    // 查询所有鲜花
    initData() {
      this.$axios({
        method: 'post',
        url: 'http://localhost:9091/commodity/findLove',
      }).then(res => {
        if (res.data.code === 200) {
          console.log(res.data.data); // 查看实际返回的数据结构
          this.flowerList = res.data.data.map(product => {
            if (!product.fsrc || product.fsrc.trim() === '') {
              const randomIndex = Math.floor(Math.random() * this.errorImages.length);
              product.fsrc = this.errorImages[randomIndex];
            }
            return product;
          });
        }
      });
    },

    handleImageError(event) {
      // 当图片加载失败时，从备用图片数组中随机选择一张图片
      const randomIndex = Math.floor(Math.random() * this.errorImages.length);
      event.target.src = this.errorImages[randomIndex];
    },

    shouye(param) {
      console.log('首页被点击', param);
      this.$router.push('/');
    },

    selectFlowerType(tid) {
      // 处理点击鲜花类型事件
      console.log("Selected flower type ID:", tid);
      // 你可以在这里添加更多的逻辑，比如跳转到特定页面或过滤显示内容
    },

    // 查询鲜花类型
    searchFlowerType() {
      this.$axios({
        method: 'post',
        url: 'http://localhost:9091/Types/findAll',
      }).then(res => {
        if (res.data.code === 200) {
          this.typesss = res.data.data;
          console.log(this.typesss)
        }
      })
    },

    goToLogin() {
      this.$router.push('/userLogin')
    },
    // 跳转鲜花页面
    xianhua() {
      this.$router.push('/xianHua');
    },
    //--------------删除--------------------------
    deleteUser() {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '删除中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        const userId = this.userForm.id; // 获取用户ID
        this.$axios({
          url: `http://localhost:9091/user/delete/${userId}`, // 将id直接拼接到URL中
          method: "post"
        }).then((res) => {
          loading.close();
          if (res.data.code == 200) {
            this.$message({
              type: 'success',
              message: res.data.msg
            });
            this.dialogVisible = false;
            this.$router.push('/userLogin');
          } else {
            this.$message.error(res.data.msg);
          }
        }).catch((error) => {
          loading.close();
          console.error("删除用户失败:", error);
          this.$message.error('删除用户时发生错误');
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // ---------------------------修改------------------------
    openUpdateUser(row) {
      this.title = "修改用户信息";
      this.dialogVisible = true; // 打开模态框
      this.userForm.id = row.id;
      this.userForm.username = row.username;
      this.userForm.password = row.password; // 初始化密码
      this.userForm.iphone = row.iphone;
      this.userForm.src = row.src;
      this.originalPassword = row.password; // 保存原始密码
    },

    // 更新用户信息
    updateUser() {
      // 检查用户是否填写了必要的信息
      if (!this.userForm.username || !this.userForm.iphone || (this.userForm.password !== this.originalPassword && !this.userForm.password)) {
        this.$message.error('请填写完整的用户信息');
        return;
      }
      // 发送更新请求
      this.$axios({
        url: "http://localhost:9091/user/update",
        method: "post",
        data: this.userForm
      }).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            type: 'success',
            message: res.data.msg
          });
          this.dialogVisible = false; // 关闭模态框
          // 清除 Cookie
          removeToken();
          // 密码被修改，重定向到登录页面
          this.$router.push('/userLogin');
          this.resetForm();
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },

    resetForm() {
      // 重置表单数据为初始状态
      this.userForm = {
        id: 0,
        username: '',
        password: '',
        iphone: '',
        src: '',
      };
    },
    //关闭模态框
    guanbi() {
      this.dialogVisible = false;
      this.resetForm()
      // window.location.reload(true);
      this.selectName()
    },
    // --------------------------------图片上传-------------------------------------------------------
    handleAvatarSuccess(res) {
      this.userForm.src = res.data;
    },
    beforeAvatarUpload(file) {
      // 检查文件类型是否为 JPG, PNG 或 WebP
      const isJPGorPNGorWebP = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/webp';
      const isLt2M = file.size / 1024 / 1024 < 2; // 检查文件大小是否小于 2MB

      if (!isJPGorPNGorWebP) {
        this.$message.error('上传头像图片只能是 JPG, PNG 或 WebP 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPGorPNGorWebP && isLt2M;
    },

    handleSelect(key, keyPath) {
      if (key === '1') {
        this.showCarousel = true;
        this.showPersonalCenter = false;
      } else if (key === '3' && !this.username) {
        this.$router.push('/userLogin');
      } else {
        console.log('选中菜单项:', key, keyPath);
      }
    },
    handleCommand(command) {
      if (command === 'logout') {
        this.username = '';
        this.src = '';
        removeToken();
        this.$router.replace('/').catch(err => {
          if (err.name !== 'NavigationDuplicated') {
            console.error(err);
          }
        });
      } else if (command === 'personal') {
        this.showPersonalCenter = true;
        this.showRecommendations = false;
        this.selectName();
      }

    },
    getCookie(name) {
      let nameEQ = name + "=";
      let ca = document.cookie.split(';');
      for (let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) === ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
      }
      return '';
    },

    getToken() {
      request({
        method: 'post',
        url: 'http://localhost:9091/user/getTook',
      }).then(res => {
        if (res.data.code === 200) {
          console.log(res)
          if (res.data.data != null) {
            this.username = res.data.data.username
            this.users = res.data.data;
            this.users.username = this.username;
            this.src = res.data.data.src
            this.selectName();
          }
        }
      })
    },

    //根据用户名查询
    selectName() {
      request({
        method: 'post',
        url: 'http://localhost:9091/user/selectOne',
      }).then(res => {
        if (res.data && res.data.data && res.data.data.src) {
          this.users = [res.data.data];// 将对象包装在数组中
          this.userForm = res.data.data;
          this.src = res.data.data.src;
          this.uid = res.data.data.id
          this.originalPassword = res.data.data.password; // 设置原始密码
          this.selectCreatCount();
        } else {
          console.error('头像数据获取失败');
        }
      })
    },

    // 查询当前登入的用户有几条数据
    selectCreatCount() {
      // 如果名字为空this.cartCount = 0;
      if (this.username == '' && this.username == null) {
        this.cartCount = 0;
      } else {
        this.$axios({
          method: 'post',
          url: 'http://localhost:9091/creat/selectCreatCount',
          params: {
            uid: this.uid  // 将uid作为请求参数发送
          },
        }).then(res => {
          if (res.data && res.data.data) {
            this.cartCount = res.data.data;
          } else {
            console.error('查询失败');
          }
        }).catch(error => {
          console.error('请求错误:', error);
        });
      }
    },

    // 跳转到订单查询页面
    goToOrders() {
      if (this.username != '' && this.username != null) {
        // 如果用户名不为空，跳转到 goShops.vue 页面
        this.$router.push('/userOrder');
      } else {
        // 如果用户名为空，提示用户先登录
        this.$message({
          type: 'warning',
          message: '请先登录'
        });
      }
    },

    //错误处理图像
    errorHandler() {
      return true
    },
  },
  created() {
    this.searchFlowerType();
    this.initData()
    this.getToken()
  },
};
</script>

<style scoped>
.detail-image {
  max-width: 100%;
  height: auto;
}

.dialog-footer {
  text-align: right;
}

.detail-image {
  display: block;
  margin: 0 auto;
}

.price-box i {
  color: #ff6700; /* 设置图标颜色 */
  margin-right: 8px; /* 设置图标右侧间距 */
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px; /* Adjust the gap between images */
}

.image-with-colors {
  position: relative;
  display: flex;
}

.image-with-colors {
  width: 288px; /* Adjust the width of the image */
  height: 656px; /* Adjust the height of the image */
}

.colors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px; /* Adjust the gap between color blocks */
  position: absolute;
  left: 308px; /* Position the colors block next to the image */
  top: 0;
}

.colors span {
  width: 100px; /* Adjust the width of the color blocks */
  height: 100px; /* Adjust the height of the color blocks */
}

.product-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.product-item {
  width: calc(25% - 10px); /* 减去间距，确保每行四个 */
  margin-bottom: 20px; /* 底部间距 */
}

.logo[data-v-0cec1358] {
  font-size: 10px;
  font-weight: bold;
  height: 65px;
  width: 40px;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  color: #333;
  height: 60px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.logo {
  font-size: 20px;
  font-weight: bold;
  margin-left: 24px;
}

.top-nav-menu {
  display: flex;
  justify-content: center;
  width: 70%;
  align-items: center;
}

.cart-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.item {
  margin: 0 10px;
  display: flex;
  align-items: center;
}

.el-icon-shopping-cart-2 {
  font-size: 20px;
}

.el-badge__content.is-fixed {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(50%);
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: #f56c6c;
  color: #fff;
  text-align: center;
  line-height: 20px;
  padding: 0 5px;
  font-size: 12px;
  right: 0;
}

/*111111111111111*/
.footer {
  background-color: #a9c5a1;
  height: 275px;
  color: #fff;
  padding: 0 0;
  font-size: 14px;
  text-align: center;
  position: relative;
  top: -3px;
}

.container {
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.footer-links, .footer-contact, .footer-legal, .footer-social {
  flex: 1;
  margin: 10px 0;
}

.footer-links h3, .footer-contact h3, .footer-legal, .footer-social {
  margin-bottom: 10px;
}

.footer-links ul {
  list-style: none;
  padding: 0;
}

.footer-links li {
  line-height: 1.5;
}

.footer-social .social-icon {
  display: inline-block;
  margin-right: 10px;
  font-size: 24px;
  transition: color 0.3s;
}

.footer-social .social-icon:hover {
  color: #ffd700; /* 金色 */
}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }

  .footer-links, .footer-contact, .footer-legal, .footer-social {
    flex-basis: auto;
    width: 100%;
    margin-bottom: 20px;
  }
}

/*个人中心样式*/
.personal-center {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.page-title {
  margin-bottom: 20px;
}

.avatar-uploader .avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.form-footer {
  margin-top: 20px;
  text-align: right;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.colors span[data-v-11c64c36][data-v-11c64c36] {
  width: 422px;
  height: 323px;
}

.colors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px; /* Adjust the gap between color blocks */
  position: absolute;
  left: 308px; /* Position the colors block next to the image */
  top: 0;
}

/*--------------------------------*/
.detail-container {
  display: flex;
  align-items: center;
}

.detail-image {
  margin-right: 20px; /* 添加一些右边距 */
}

.detail-text {
  flex-grow: 1; /* 让文字容器占据剩余空间 */
}

/*购物车*/
.cart-icon {
  display: flex;
  align-items: center;
}

.cart-icon i {
  font-size: 24px;
}

.cart-icon span {
  margin-left: 8px;
  font-size: 16px;
}
</style>